<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width"/>
    <title>报警器分布</title>
    <link rel="stylesheet" type="text/css" href="../../leaflet/leaflet.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/map.css"/>
    <script src="../../leaflet/leaflet.js"></script>
    <script src="../../leaflet/leaflet.marker.highlight.js"></script>
    <link rel="stylesheet" type="text/css" href="../../leaflet/leaflet.marker.highlight.css"/>
    <link rel="stylesheet" type="text/css" href="../../js/lib/LeafletStyleSheet.css">
    <style>
        html, body, #map {
            width:100%;
            height:100%;
            margin: 0;
            padding: 0;
            font-family: sans-serif;
        }

        div#size, a#delete {
            position: absolute;
            right: 1em;
            top: 1em;
            background: white;
            color: black;
            padding: 0.4em;
            border-radius: 4px;
            z-index: 500;
        }
    </style>
</head>
<body>
<div id="map"></div>
<script src="../../js/mapSource.js"></script>
<script src="../../js/lib/jquery-3.2.1.min.js"></script>
<script src="../../js/common.js"></script>
<script src="../../js/lib/PruneCluster.js"></script>
<script>
    var layer1 = L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
        maxZoom: 33,
        id: 'mapbox.streets',
        accessToken: 'pk.eyJ1IjoiaGFtYnVnZXJkZXZlbG9wIiwiYSI6ImNqNXJtZzczcDB6aHgycW1scXZqd3FpNmcifQ.d4p32JmAhTek8BUIt3WGLw'
    });
    map.addLayer(layer1);
    // L.tileLayer.wms(mapSource.AlarmList.url, {
    //     layers: mapSource.AlarmList.layer,
    //     crs: L.CRS.EPSG4326,
    //     format: 'image/png',
    //     transparent: true,
    //     maxZoom: 33,
    //     minZoom: 13
    // }).addTo(map);

    map.fitBounds([[34.823905944824, 113.557327270508],
        [34.8256912231445, 113.558494567871]]);

    var wfsUrl=mapSource.AlarmList.url +
        "service=WFS&" +
        "version=1.0.0&" +
        "request=GetFeature&" +
        "typeName="+mapSource.AlarmList.layer+"&" +
        "maxFeatures=500&" +
        "outputFormat=json";
    $.get(wfsUrl, {}, function (data, status) {
        if (status == "success") {
            console.log(data);
            if (data.features.length > 0) {
                var leafletView = new PruneClusterForLeaflet();
                data.features.forEach(function (record) {
                    var marker = new PruneCluster.Marker(record.geometry.coordinates[1], record.geometry.coordinates[0]);
                    leafletView.RegisterMarker(marker);
                    marker.data.popup = '编号：'+record.properties.code+
                    "<br>地址："+record.properties.address+"<br>公司：XX公司";
                });

                // var geom=JSON.parse(data[0].geom);
                // console.log(geom.coordinates);
                map.addLayer(leafletView);
            }
        }
    });
</script>
</body>
</html>